<!-- 订单详情页 -->
<template>
    <div id="arctive">
      <div class="state-wrapper">
        <div>
          <div v-if="status===0">订单待付款</div>
          <div v-else-if="status===1">订单待使用</div>
          <div v-else>订单已完成</div>
          <div class="remind" v-if="status===1">{{prompt}}</div>
        </div>
        <div>
          <img @click.stop="herderclick" src="../../../static/img/137080242234294358.png">
        </div>
      </div>
      <div class="content-date">
         <div class="content-date-left">订单号：{{detailedList.receiptcode}}</div>
         <div class="content-date-right">{{detailedList.sendtime}}&nbsp;用餐</div>
        </div>
      <div class="content-wrapper">
        <div class="content-nav"  v-for="item of stateList" :key="item.id">
          <div class="content-title">
            <span><img :src="item.goodEntity.imgurl"></span>
            <span class="content-number">
              <span>{{item.goodname}}</span>
              <span class="deal">x{{item.num}}</span>
            </span>
          </div>
          <div class="content-price">￥{{item.price}}</div>
        </div>
      </div>
      <div class="detailed-wrapper">
        <div class="detailed-content">
          <span class="detailed-title">用户名</span>
          <span class="detailed-number">{{detailedList.customername}}</span>
        </div>
        <div class="detailed-content">
          <span class="detailed-title">房间号</span>
          <span class="detailed-number">{{detailedList.address}}</span>
        </div>
        <div class="detailed-content">
          <span class="detailed-title">手机号</span>
          <span class="detailed-number">{{detailedList.phone}}</span>
        </div>
        <div class="detailed-content">
          <span class="detailed-title">用餐人数</span>
          <span class="detailed-number">{{detailedList.peoplenum}}人</span>
        </div>
        <div class="detailed-content">
          <span class="detailed-title">备注</span>
          <span class="detailed-number">{{detailedList.remark}}</span>
        </div>
      </div>
<!--      <button class="paybtn" v-if="detailedList.status===0" :disabled="payTip" @click="jumpPay(detailedList.totalmoney)">
        支付
      </button>-->
    </div>
</template>

<script>
import apis from '../../../static/js/apis'
export default {
  data () {
    return {
      receiptcode: '',
      receiptid: '',
      stateList: [],
      prompt: '30分钟内联系酒店取消,请按约定时间用餐',
      detailedList: {},
      tel1: '',
      status: '',
      payTip: false
    }
  },
  methods: {
    herderclick () {
      window.location.href = 'tel:' + this.tel1
    },
    postFormData () {
      this.$axios
        .post(
          apis + '/shenglian-fast/app/weixinapp/recepitinfo',
          {
            receiptid: this.receiptid
          }
        )
        .then(response => {
          if (response.data.msg === 'success') {
            let data = response.data
            this.detailedList = data.recepit
            this.status = this.detailedList.status
            this.tel1 = data.phone
            this.stateList = data.recepititem
          } else {
            this.$dialog.toast({mes: '数据错误，请联系管理员', timeout: 1000})
          }
        })
        .catch(error => {
          console.log(error)
          this.$dialog.toast({mes: '服务器异常，稍后再试！', timeout: 1000})
        })
    },
    jumpPay () {
      this.payTip = true
      this.$axios
        .post(
          apis + '/shenglian-fast/app/weixinapp/receiptpay',
          {
            receiptid: this.receiptid // 订单id
          }
        )
        .then(response => {
          if (response.data.msg === 'success') {
            let receiptid = response.data.receiptid
            this.receiptid = receiptid
            let data = response.data.result
            this.weixinPay(data) // 调支付
          } else {
            this.payTip = false
            this.$dialog.toast({mes: '数据提交错误，请联系管理员', timeout: 1000})
          }
        })
        .catch(error => {
          console.log(error)
          this.payTip = false
          this.$dialog.toast({mes: '服务器异常，稍后再试！', timeout: 1000})
        })
    },
    weixinPay (data) {
      var vm = this
      if (typeof WeixinJSBridge === 'undefined') { // 微信浏览器内置对象。参考微信官方文档
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false)
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data))
          document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady(data))
        }
      } else {
        vm.onBridgeReady(data)
      }
      this.payTip = false
    },
    onBridgeReady (data) {
      var vm = this
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
          'appId': data.appId, // 公众号名称，由商户传入
          'timeStamp': data.timeStamp, // 时间戳，自1970年以来的秒数
          'nonceStr': data.nonceStr, // 随机串
          'package': data.package,
          'signType': data.signType, // 微信签名方式：
          'paySign': data.paySign // 微信签名
        },
        function (res) {
          // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          console.log(res)
          // 获取支付信息
          if (res.err_msg === 'get_brand_wcpay_request:ok') {
            // vm.$dialog.toast({mes: '支付成功', timeout: 2000})
            vm.$axios
              .post(
                apis + '/shenglian-fast/app/weixinapp/paysuccess',
                {
                  receiptid: vm.receiptid // 订单id
                }
              )
              .then(response => {
                if (response.data.msg === 'success') {
                  vm.$router.push({
                    path: '/success',
                    query: {
                      receiptid: vm.receiptid
                    }
                  })
                } else {
                  vm.$dialog.toast({mes: '订单信息状态提交错误，请联系管理员', timeout: 1000})
                }
              })
              .catch(error => {
                console.log(error)
                vm.$dialog.toast({mes: '服务器异常，稍后再试！', timeout: 1000})
              })
          } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
            vm.$dialog.toast({mes: '取消支付', timeout: 2000})
          } else {
            vm.$dialog.toast({mes: '支付失败', timeout: 2000})
          }
        }
      )
    }
  },
  components: {
    apis
  },
  created () {
    this.receiptid = this.$route.query.receiptid
    this.postFormData()
  }
}
</script>

<style scoped>
#arctive {
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  position: fixed;
  background-color: #F2F2F2;
  top:0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.state-wrapper {
  background: #FFF;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  height: 75px;
  padding: 0 31px 0 16px;
  /*line-height: 30px;*/
}
.remind {
  margin-top: 11px;
  font-size: 12px;
  color: #999999;
}
.state-wrapper img {
  margin-top: 6px;
  height: 32px;
  width: 32px;
}
.content-wrapper {
  box-sizing: border-box;
  padding: 0 16px ;
  background-color: #FFF;
  overflow: auto;
  width: 100%;
}
.content-date-left{
  text-align: left;
  flex:1;
  padding-left: 16px;
  color:#333333;
}
.content-date {
  height: 45px;
  padding-right: 16px;
  margin-top: 8px;
  line-height: 45px;
  /*margin-left: 235px;*/
  display: flex;
  justify-content: flex-end;
  font-size: 12px;
  color: #92D4EF;
  background-color: #FFFFFF;
  /*float: right;*/
}
.content-nav {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid  #F2F2F2;
  padding: 15px 0;
}
.content-nav img {
  height: 30px;
  width: 30px;
}
.content-title {
  display: flex;
}
.content-number {
  display: flex;
  flex-direction: column;
  margin-left: 15px;
  font-size: 12px;
  line-height: 15px;
}
.deal {
  color: #999999;
}
.content-price {
  color: #999999;
  font-size: 14px;
  line-height: 34px;
}
.detailed-wrapper {
  margin-top: 8px;
  background: #FFFFFF;
  padding: 0 16px;
}
.detailed-content {
  display: flex;
  justify-content: space-between;
  height: 45px;
  line-height: 45px;
  font-size: 12px;
  border-top: 1px solid #f2f2f2;
}
.detailed-title {
  color: #333333;
}
.detailed-number {
  color: #999999;
}
.paybtn{
  width: 90%;
  height: 46px;
  background: #92D4EF;
  color:#FFF;
  font-size: 15px;
  text-align: center;
  line-height: 46px;
  outline: none;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  border:none;
  display: block;
}
</style>
